<template>
	<view class="pd-10" @click.stop="clckItem">
		<view class="bg_fff" :class="{'item-radius':type==1}"
			style="overflow: hidden;position: relative;padding-bottom: 10rpx;">
			<u-image :src="data.img" width="100%" height="300rpx" :radius="type==0?'20rpx':'0px'">
			</u-image>
			<u-image
				src="https://dtkj-qnyimg.diankuai.com/%E8%AF%BE%E5%A0%82/%E8%A7%86%E9%A2%91%20%E6%8B%B7%E8%B4%9D%206.png"
				width="50rpx" height="50rpx" radius="30rpx" :customStyle="{
					position:'absolute',
					top:'10rpx',
					right:'10rpx'
				}">
			</u-image>
			</image>
			<view class="videoNumbBox c_ffffff f_34" v-if="data.count"
				style="border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
				{{data.count}}个视频
			</view>
			<view class="f_34 item-title">
				{{data.title}}
			</view>
			<view class="freebox">
				<text :class="{'type0':type==0,'type1':type==1}"
					v-if="data.levelInfo?(data.levelInfo.number>0):false">{{data.levelInfo.name}}</text>
				<text :class="{'type0':type==0,'type1':type==1}" v-if="data.money>=0">￥{{data.money}}</text>
				<text :class="{'type0':type==0,'type1':type==1}"
					v-if="(data.levelInfo?(data.levelInfo.number>0):false)&&data.money<=0">免费</text>
				<text style="font-size: 20rpx;margin-left: 10rpx;" v-if="data.play">{{data.play}}人观看</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "course_item",
		props: {
			data: {
				type: Object,
				default: null
			},
			type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clckItem() {
				this.$emit("clickItem", this.data);
			}
		}
	}
</script>

<style scoped>
	.videoNumbBox {
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 1000000000;
	}

	.item-title {
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		font-weight: bold;
		padding: 8rpx 10rpx;
	}

	.item-radius {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.freebox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.type0,
	.type1 {
		font-size: 20rpx;
		color: #fff;
		border-radius: 50rpx;
		padding: 4rpx 8rpx;
		margin-left: 10rpx;
	}

	.type0 {
		background-color: #C62B2C;
	}

	.type1 {
		background-color: #131F4F;
	}
</style>
